<?php
/**
 * 3-4岁形状认知内容
 */

if (!defined('ROOT_PATH')) {
    die('直接访问被禁止');
}

// 设置页面标题
set_page_title('3-4岁形状认知');

// 页面特定样式
$page_styles = <<<HTML
<style>
    /* 3-4岁形状认知特定样式 */
    body {
        background-color: #e8f5e9;
        font-family: 'Comic Sans MS', 'Marker Felt', 'Arial Rounded MT Bold', sans-serif;
    }
    
    .navbar {
        background: linear-gradient(to right, #81c784, #a5d6a7);
        border-radius: 0 0 20px 20px;
    }
    
    .shapes-header {
        text-align: center;
        padding: 40px 0;
        margin-bottom: 30px;
        background-color: #fff;
        border-radius: 15px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        border: 6px solid #c8e6c9;
    }
    
    .shapes-title {
        font-size: 2.5rem;
        font-weight: bold;
        color: #4caf50;
        margin-bottom: 15px;
    }
    
    .shapes-subtitle {
        font-size: 1.2rem;
        color: #666;
        max-width: 800px;
        margin: 0 auto 20px;
    }
    
    .shape-card {
        background-color: white;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        margin-bottom: 30px;
        transition: transform 0.3s ease;
    }
    
    .shape-card:hover {
        transform: translateY(-5px);
    }
    
    .shape-display {
        height: 180px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }
    
    .shape-info {
        background-color: #f5f5f5;
        padding: 20px;
        text-align: center;
    }
    
    .shape-name {
        font-size: 1.8rem;
        font-weight: bold;
        margin-bottom: 10px;
        color: #4caf50;
    }
    
    .shape-example {
        font-size: 1.1rem;
        color: #666;
    }
    
    .circle-shape {
        width: 120px;
        height: 120px;
        background-color: #4caf50;
        border-radius: 50%;
    }
    
    .square-shape {
        width: 120px;
        height: 120px;
        background-color: #2196f3;
    }
    
    .rectangle-shape {
        width: 160px;
        height: 80px;
        background-color: #ff9800;
    }
    
    .triangle-shape {
        width: 0;
        height: 0;
        border-left: 70px solid transparent;
        border-right: 70px solid transparent;
        border-bottom: 120px solid #e91e63;
    }
    
    .star-shape {
        position: relative;
        width: 120px;
        height: 120px;
    }
    
    .star-shape img {
        width: 100%;
        height: 100%;
    }
    
    .heart-shape {
        position: relative;
        width: 120px;
        height: 120px;
    }
    
    .heart-shape img {
        width: 100%;
        height: 100%;
    }
    
    .activity-section {
        background-color: white;
        border-radius: 15px;
        padding: 30px;
        margin-bottom: 40px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    .activity-title {
        font-size: 1.8rem;
        text-align: center;
        color: #4caf50;
        margin-bottom: 25px;
        font-weight: bold;
    }
    
    .activity-card {
        border: 3px solid #c8e6c9;
        border-radius: 15px;
        padding: 20px;
        margin-bottom: 20px;
        background-color: #f9fff9;
    }
    
    .activity-name {
        font-size: 1.4rem;
        font-weight: bold;
        margin-bottom: 15px;
        color: #4caf50;
    }
    
    .activity-description {
        color: #666;
        margin-bottom: 15px;
    }
    
    .activity-steps {
        padding-left: 20px;
    }
    
    .activity-steps li {
        margin-bottom: 10px;
    }
    
    .back-button {
        background-color: #4caf50;
        color: white;
        padding: 10px 25px;
        border-radius: 50px;
        font-weight: bold;
        margin-bottom: 30px;
        display: inline-block;
        transition: all 0.3s ease;
    }
    
    .back-button:hover {
        background-color: #388e3c;
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        color: white;
    }
</style>
HTML;
?>

<!-- 主内容区 -->
<div class="container mt-4">
    <!-- 返回按钮 -->
    <a href="<?php echo page_url('age-3-4-cognitive'); ?>" class="back-button mb-4">
        <i class="fas fa-arrow-left mr-2"></i> 返回认知专区
    </a>
    
    <!-- 形状认知标题 -->
    <div class="shapes-header">
        <h1 class="shapes-title">形状认知</h1>
        <p class="shapes-subtitle">认识基本几何形状，学习区分不同形状，培养孩子的空间感知能力。</p>
        <img src="<?php echo asset_url('images/shapes-banner.jpg'); ?>" alt="形状认知" class="img-fluid rounded" style="max-height: 300px;">
    </div>
    
    <!-- 形状卡片 -->
    <h2 class="section-title text-center mb-4">基础形状</h2>
    
    <div class="row">
        <!-- 圆形 -->
        <div class="col-md-4">
            <div class="shape-card">
                <div class="shape-display">
                    <div class="circle-shape"></div>
                </div>
                <div class="shape-info">
                    <h3 class="shape-name">圆形</h3>
                    <p class="shape-example">像球、钟表、车轮、太阳</p>
                </div>
            </div>
        </div>
        
        <!-- 正方形 -->
        <div class="col-md-4">
            <div class="shape-card">
                <div class="shape-display">
                    <div class="square-shape"></div>
                </div>
                <div class="shape-info">
                    <h3 class="shape-name">正方形</h3>
                    <p class="shape-example">像积木、礼物盒、饼干</p>
                </div>
            </div>
        </div>
        
        <!-- 长方形 -->
        <div class="col-md-4">
            <div class="shape-card">
                <div class="shape-display">
                    <div class="rectangle-shape"></div>
                </div>
                <div class="shape-info">
                    <h3 class="shape-name">长方形</h3>
                    <p class="shape-example">像书本、门、床、电视</p>
                </div>
            </div>
        </div>
        
        <!-- 三角形 -->
        <div class="col-md-4">
            <div class="shape-card">
                <div class="shape-display">
                    <div class="triangle-shape"></div>
                </div>
                <div class="shape-info">
                    <h3 class="shape-name">三角形</h3>
                    <p class="shape-example">像山、帐篷、披萨、警示牌</p>
                </div>
            </div>
        </div>
        
        <!-- 星形 -->
        <div class="col-md-4">
            <div class="shape-card">
                <div class="shape-display">
                    <div class="star-shape">
                        <img src="<?php echo asset_url('images/star-shape.png'); ?>" alt="星形">
                    </div>
                </div>
                <div class="shape-info">
                    <h3 class="shape-name">星形</h3>
                    <p class="shape-example">像夜空中的星星、海星</p>
                </div>
            </div>
        </div>
        
        <!-- 心形 -->
        <div class="col-md-4">
            <div class="shape-card">
                <div class="shape-display">
                    <div class="heart-shape">
                        <img src="<?php echo asset_url('images/heart-shape.png'); ?>" alt="心形">
                    </div>
                </div>
                <div class="shape-info">
                    <h3 class="shape-name">心形</h3>
                    <p class="shape-example">像爱心饼干、礼物装饰</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 形状活动 -->
    <div class="activity-section mt-5">
        <h2 class="activity-title">形状游戏活动</h2>
        
        <div class="activity-card">
            <h3 class="activity-name">形状猎人</h3>
            <p class="activity-description">在家中寻找各种形状的物品，增强形状辨认能力。</p>
            <ol class="activity-steps">
                <li>选择一种形状（如圆形）</li>
                <li>给孩子几分钟时间在家中寻找这种形状的物品</li>
                <li>找到后，一起讨论这些物品为什么是该形状</li>
                <li>换一种形状继续游戏</li>
            </ol>
        </div>
        
        <div class="activity-card">
            <h3 class="activity-name">形状拼贴画</h3>
            <p class="activity-description">用不同的几何形状创作有趣的艺术作品。</p>
            <ol class="activity-steps">
                <li>准备各种颜色的纸张，剪成不同的几何形状</li>
                <li>提供一张大白纸和胶水</li>
                <li>鼓励孩子用这些形状拼贴出动物、房子或其他创意图案</li>
                <li>完成后讨论作品中使用了哪些形状</li>
            </ol>
        </div>
        
        <div class="activity-card">
            <h3 class="activity-name">形状分类游戏</h3>
            <p class="activity-description">锻炼孩子的分类能力和形状认知。</p>
            <ol class="activity-steps">
                <li>准备各种形状的卡片或物品</li>
                <li>准备几个不同的盒子，每个代表一种形状</li>
                <li>让孩子将物品按形状分类放入对应的盒子</li>
                <li>完成后，检查分类是否正确</li>
                <li>讨论每种形状的特点（如圆形没有角，正方形有四个相等的边）</li>
            </ol>
        </div>
    </div>
</div> 